<template>
  <div class="check_list">
    <head-top head-title="详情" go-back="true"></head-top>
    <div class="check_main" v-if="flag">
      <div class="check_top">
        <div class="help_title">
          <img
            :src="checklist.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
            alt="">
          <div class="help_msg">
            <div class="msg_top">
              <p>{{checklist.real_name}}</p>
              <p>
                <span class="phone-image"></span>
                <a :href="'tel:'+checklist.phone">
                  <span ref="phone">{{checklist.phone}}</span>
                </a>
              </p>
            </div>
            <div class="msg_bottom">
              <p>时间：{{checklist.created_at*1000 | dateFmt('YYYY-MM-DD')}}</p>
              <!-- <a v-show="status===1" type="button" @click="$router.push('/CheckPublish')"><span>编辑</span></a> -->
            </div>
          </div>
        </div>
      </div>
      <div class="msg_cross">
        <p>项目名称：{{checklist.project_name}}</p>
        <p v-show="checklist.lift_num!=='0'">电梯编号：{{checklist.lift_num}}</p>
      </div>
      <!--详情列表-->
      <div class="detail_list">
        <div class="last_child" v-for="(list,index) in checklist.data"
             @click="goDetail(checklist.related_id,list.up_id )">
          <mt-cell :title="list.up_name" is-link>
            <span>查看详细</span>
          </mt-cell>
        </div>
      </div>
      <div class="con_opinion border-bottom" v-show="checklist.summary!==''">
        <h3 v-show="checklist.summary!==''">整改意见：</h3>
        <p>
          {{checklist.summary}}
        </p>
      </div>
      <div class="con_type">
        <span>浏览人数：{{checklist.reading_amount}}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .check_list {
    width: 100%;
    padding-top: 40px;
    .check_top {
      width: 100%;
      .help_title {
        width: 100%;
        height: 65px;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          float: left;
          margin-top: 10px;
          margin-left: 10px;
        }
        .help_msg {
          float: right;
          width: 83%;
          height: 65px;
          .msg_top {
            width: 100%;
            height: 33px;
            p:first-child {
              float: left;
              font-size: 15px;
              line-height: 33px;
            }
            p:last-child {
              float: right;
              margin-right: 10px;
              .phone-image {
                display: inline-block;
                width: 15px;
                height: 15px;
                background-size: 15px 15px;
                background-repeat: no-repeat;
                @include bgimg('../home/images/dianhua');
                vertical-align: middle;
                float: left;
                margin-top: 9px;
              }
              span {
                font-size: 13px;
                float: right;
                line-height: 33px;
                color: #808080;
              }
            }
          }
          .msg_bottom {
            width: 100%;
            height: 32px;
            p {
              clear: both;
              float: left;
              line-height: 25px;
              font-size: 13px;
              color: #808080;
            }
            a {
              float: right;
              margin-right: 10px;
              border: 1px solid #0078de;
              border-radius: 5px;
              background: #fff;
              padding: 5px 15px 5px 15px;
              outline: none;
              span {
                color: #0078de;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
    .msg_cross {
      width: 100%;
      height: 30px;
      background: #e4e4e4;
      font-size: 12px;
      color: #666;
      line-height: 30px;
      p:first-child {
        float: left;
        padding-left: 10px;
      }
      p:last-child {
        float: right;
        padding-right: 10px;
      }
    }
    .detail_list {
      .mint-cell {
        min-height: 44px;
        width: 100%;
        &:last-child {
          background-size: 100% 1px;
          .mint-cell-wrapper {
            background-size: 100% 0px;
          }
        }
        .mint-cell-wrapper {
          background-position: bottom left;
          background-size: 100% 1px;
        }
        .mint-cell-value.is-link {
          margin-right: 12px;
          color: #0078de;
          font-size: 13px;
        }
      }
      .last_child {
        &:last-child {
          .mint-cell {
            .mint-cell-wrapper {
              // background-size: 100% 0px;
            }
          }
        }
      }
    }
    .con_opinion {
      padding: 0 10px;
      h3 {
        font-size: 15px;
        color: #000;
        font-weight: normal;
        padding-top: 10px;
      }
      p {
        // text-indent: 2em;
        font-size: 14px;
        line-height: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #666;
      }
    }
    .con_type {
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      span {
        font-size: 12px;
        float: right;
        color: #999999;
      }
    }
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { getCheckList } from '../../api/supervise.js'

  export default {
    name: 'CheckDetailList',
    data () {
      return {
        checklist: {},
        status: '',
        flag: false
      }
    },
    created () {
      this._getCheckList()
    },
    methods: {
      goDetail (id, upid) {
        this.$router.push('/CheckDetail/' + id + '/' + upid)
      },
      _getCheckList () {
        getCheckList(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.checklist = res.data.data
            // status状态：1-工作人员  0-非工作人员
            this.status = res.data.status
            this.flag = true
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>
